<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" href="../../css/common.css" />
	<link rel="stylesheet" href="../../css/pages/login/index.css" />
    <link rel="stylesheet" href="../../lib/layui/css/layui.css"/>
	<style>
		#left-panel {
			position: absolute;
			left: 18%;
			top: 40%;
		}

		img {
			width: 100px;
			margin-left: 25%;
		}

		#logo-disc {
			color: #cfcfcf;
			margin-top: 20px;
			font-size: 40px;
			letter-spacing: 5px;
		}

		.my-button {
			background-color: rgba(200, 200, 200, .1);
			color: #ccc;
			border-bottom-left-radius: 10px;
			padding: 6px;
			right: 15%;
			box-sizing: border-box;
		}

		.my-button:hover {
			background-color: rgba(200, 200, 200, .3);
		}

		#bottom-panel {
			margin-top: 50px;
		}
        #center-panel{
            position: absolute;
            margin-top: 100px;
            margin-left: 35%;
            padding-left: -400px;
            height: 550px
        }
	</style>
	
</head>

<body>
	<div id="left-panel">
		<img src="../../img/logo.png" />
		<div id="logo-disc">
			雨扉论坛
		</div>
	</div>
	<div id="center-panel">
		<div id="main-panel">
			<span id="top-desc">注册</span>

			<div id="input-panel">
				<form id="reg-form">
					<div class="input-item" id="username-item">
						<input type="text" placeholder="用户名" id="username" name="username" onblur="check_username()" />
						<span class="check-tipper"></span>
						<div class="valid-checker" id="username-checker"></div>
					</div>
					<div class="input-item" id="pwd-item">
						<input type="password" placeholder="密码" name="password" id="password"
							oninput="password_level_check()" onblur="password_level_check()" />
						<span class="check-tipper"></span>
						<div class="valid-checker" id="password-checker"></div>

						<div id="pwd-lvl-bar">
							<div id="pwd-lvl-base"></div>
							<div id="pwd-lvl"></div>
							密码强度
						</div>
					</div>
					<div class="input-item" id="repeat-pwd-item">
						<input type="password" placeholder="重复密码" oninput="valid_password()" />
						<div class="check-tipper"></div>
						<div class="valid-checker"></div>
					</div>
					<div class="input-item" id="email-item">
						<input type="email" placeholder="邮箱" name="email" onblur="email_check()" />
						<div class="check-tipper"></div>
						<div class="valid-checker"></div>
					</div>
					
					<div class="input-item">
						<input type="text" style="width:60%; box-sizing: border-box;" name="verify_code"/>
						<input type="button" class="my-button" id="send-email-btn" onclick="send_valid_email()"
						value="发送验证码"></input>
					</div>

					<div id="bottom-panel">
						<input type="button" value="O 确认" onclick="register()" />
						<a href="./login.html"><input type="button" value="> 登录" /></a>
					</div>
			</form>
            </div>

        </div>
	</div>

	<script src="../../lib/jquery-3.7.0.js"></script>
    <script src="../../lib/layui/layui.js"></script>
	<script src="../../js/pages/login/register.js"></script>
</body>

</html>